<template>
    <div>

        <div class="group">
            <h1>1.Button 按钮</h1>
            <p> 常用的操作按钮。</p>

            <h2>基础用法</h2>
            <p>使用 type、plain、round 和 circle 来定义按钮的样式。</p>
            <div class="mb-4">
                <el-button>Default</el-button>
                <el-button type="primary">Primary</el-button>
                <el-button type="success">Success</el-button>
                <el-button type="info">Info</el-button>
                <el-button type="warning">Warning</el-button>
                <el-button type="danger">Danger</el-button>
            </div>

            <div class="mb-4">
                <el-button plain>Plain</el-button>
                <el-button type="primary" plain>Primary</el-button>
                <el-button type="success" plain>Success</el-button>
                <el-button type="info" plain>Info</el-button>
                <el-button type="warning" plain>Warning</el-button>
                <el-button type="danger" plain>Danger</el-button>
            </div>

            <div class="mb-4">
                <el-button round>Round</el-button>
                <el-button type="primary" round>Primary</el-button>
                <el-button type="success" round>Success</el-button>
                <el-button type="info" round>Info</el-button>
                <el-button type="warning" round>Warning</el-button>
                <el-button type="danger" round>Danger</el-button>
            </div>

            <div>
                <el-button :icon="Search" circle />
                <el-button type="primary" :icon="Edit" circle />
                <el-button type="success" :icon="Check" circle />
                <el-button type="info" :icon="Message" circle />
                <el-button type="warning" :icon="Star" circle />
                <el-button type="danger" :icon="Delete" circle />
                <el-button type="lalala" :icon="ZoomOut" circle />
            </div>
        </div>

        <div class="group">
            <h1>2.禁用状态</h1>
            <p>你可以使用 disabled 属性来定义按钮是否被禁用。</p>
            <p> 使用 disabled 属性来控制按钮是否为禁用状态。 该属性接受一个 Boolean 类型的值。
            </p>

            <div class="mb-4">
                <el-button disabled>Default</el-button>
                <el-button type="primary" disabled>Primary</el-button>
                <el-button type="success" disabled>Success</el-button>
                <el-button type="info" disabled>Info</el-button>
                <el-button type="warning" disabled>Warning</el-button>
                <el-button type="danger" disabled>Danger</el-button>
            </div>

            <div>
                <el-button plain disabled>Plain</el-button>
                <el-button type="primary" plain disabled>Primary</el-button>
                <el-button type="success" plain disabled>Success</el-button>
                <el-button type="info" plain disabled>Info</el-button>
                <el-button type="warning" plain disabled>Warning</el-button>
                <el-button type="danger" plain disabled>Danger</el-button>
            </div>
        </div>

        <div class="group">
            <h1>3.链接按钮</h1>
            <h3>WARNING</h3>
            <p> type="text" 已被 废弃，将于版本 3.0.0 时 移除，请考虑切换至新的 API。</p>
            <p> 新的 API link 于 2.2.1 版本时添加，你可以使用 type API 设置链接按钮的主题样式</p>

            <p>基础链接按钮:</p>
            <div class="mb-4">
                <el-button v-for="button in buttons" :key="button.text" :type="button.type" link>
                    {{ button.text }}
                </el-button>
            </div>

            <p>禁用链接按钮:</p>
            <div>
                <el-button v-for="button in buttons" :key="button.text" :type="button.type" link disabled>
                    {{ button.text }}
                </el-button>
            </div>

        </div>

        <div class="group">
            <h1>4.文字按钮</h1>
            <p>Basic text button</p>
            <div class="mb-4">
                <el-button v-for="button in buttons" :key="button.text" :type="button.type" text>
                    {{ button.text }}
                </el-button>
            </div>

            <p>Background color always on</p>
            <div class="mb-4">
                <el-button v-for="button in buttons" :key="button.text" :type="button.type" text bg>
                    {{ button.text }}
                </el-button>
            </div>

            <p>Disabled text button</p>
            <div>
                <el-button v-for="button in buttons" :key="button.text" :type="button.type" text disabled>
                    {{ button.text }}
                </el-button>
            </div>
        </div>

        <div class="group">
            <h1>5.图标按钮</h1>

            <div>
                <el-button type="primary" :icon="Edit" />
                <el-button type="primary" :icon="Share" />
                <el-button type="primary" :icon="Delete" />
                <el-button type="primary" :icon="Search">Search</el-button>
                <el-button type="primary">
                    Upload<el-icon class="el-icon--right">
                        <Upload />
                    </el-icon>
                </el-button>
            </div>
        </div>

        <div class="group">
            <h1>6.按钮组</h1>
            <p>使用 el-button-group 对多个按钮分组</p>
            <el-button-group>
                <el-button type="primary" :icon="ArrowLeft">Previous Page</el-button>
                <el-button type="primary">
                    Next Page<el-icon class="el-icon--right">
                        <ArrowRight />
                    </el-icon>
                </el-button>
            </el-button-group>

            <el-button-group class="ml-4">
                <el-button type="primary" :icon="Edit" />
                <el-button type="primary" :icon="Share" />
                <el-button type="primary" :icon="Delete" />
            </el-button-group>
        </div>

        <div class="group">
            <h1>7.加载状态按钮</h1>
            <p>点击按钮来加载数据，并向用户反馈加载状态。</p>
            <p>通过设置 loading 属性为 true 来显示加载中状态。</p>
            <p>TIP：
                您可以使用 loading 插槽或 loadingIcon属性自定义您的loading图标
                ps: loading 插槽优先级高于loadingIcon属性</p>

            <el-button type="primary" loading>Loading</el-button>
            <el-button type="primary" :loading-icon="Eleme" loading>Loading</el-button>
            <el-button type="primary" loading>
                <template #loading>
                    <div class="custom-loading">
                        <svg class="circular" viewBox="-10, -10, 50, 50">
                            <path class="path" d="
            M 30 15
            L 28 17
            M 25.61 25.61
            A 15 15, 0, 0, 1, 15 30
            A 15 15, 0, 1, 1, 27.99 7.5
            L 15 15
          " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)" />
                        </svg>
                    </div>
                </template>
                Loading
            </el-button>
        </div>

        <!--  -->
        <div class="group">
            <el-button size="small" :loading="true" :icon="Search" round>
                <span>默认插槽</span>
                <template #loading>
                    <div class="custom-loading">加载中</div>
                </template>
            </el-button>

            <el-button ref="myButton" :size="buttonSize" :type="buttonType" :disabled="isDisabled"
                :should-add-space="true">
                点击我
            </el-button>
            <div class="el-shadow200"></div>
        </div>

        <div class="group">
            <div class="group">
                <h3>Cascader 级联选择器</h3>
                <div>
                    <el-cascader clearable v-model="cascaderVal" :options="cascaderOptions" :props="cascaderProps"
                        @change="cascaderHandleChange" />
                </div>
            </div>
        </div>

        <!--  -->

        <div class="group">
            <h1>8.调整尺寸</h1>
            <p>除了默认的大小，按钮组件还提供了几种额外的尺寸可供选择，以便适配不同的场景。</p>
            <p>使用 size 属性额外配置尺寸，可使用 large和small两种值。</p>

            <div class="flex flex-wrap items-center mb-4">
                <el-button size="large">Large</el-button>
                <el-button>Default</el-button>
                <el-button size="small">Small</el-button>
                <el-button size="large" :icon="Search">Search</el-button>
                <el-button :icon="Search">Search</el-button>
                <el-button size="small" :icon="Search">Search</el-button>
            </div>
            <div class="flex flex-wrap items-center mb-4">
                <el-button size="large" round>Large</el-button>
                <el-button round>Default</el-button>
                <el-button size="small" round>Small</el-button>
                <el-button size="large" :icon="Search" round>Search</el-button>
                <el-button :icon="Search" round>Search</el-button>
                <el-button size="small" :icon="Search" round>Search</el-button>
            </div>
            <div class="flex flex-wrap items-center">
                <el-button :icon="Search" size="large" circle />
                <el-button :icon="Search" circle />
                <el-button :icon="Search" size="small" circle />
            </div>
        </div>

        <div class="group">
            <h1>9.Tag标签按钮</h1>
            <p>您可以自定义元素标签。例如，按钮，div，路由链接，nuxt链接。</p>
            <el-button>button</el-button>
            <el-button tag="div" role="button" tabindex="0">div</el-button>
            <el-button type="primary" tag="a" href="https://github.com/element-plus/element-plus" target="_blank"
                rel="noopener noreferrer">
                a
            </el-button>
        </div>

        <div class="group">
            <h1>1.Border 边框</h1>
            <p>我们对边框进行统一规范，可用于按钮、卡片、弹窗等组件里。</p>
            <table class="demo-border" border="1">
                <tbody>
                    <tr>
                        <td class="text">边框样式名称： </td>
                        <td class="text"> 边框厚度：</td>
                        <td class="line">边框的样子：</td>
                    </tr>
                    <tr>
                        <td class="text">Solid</td>
                        <td class="text">1px</td>
                        <td class="line">
                            <div />
                        </td>
                    </tr>
                    <tr>
                        <td class="text">Dashed</td>
                        <td class="text">2px</td>
                        <td class="line">
                            <div class="dashed" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="group">
            <h1>圆角</h1>
            <p>我们提供了以下几种圆角样式，以供选择。</p>
            <el-row :gutter="12" class="demo-radius">
                <el-col v-for="(radius, i) in radiusGroup" :key="i" :span="6" :xs="{ span: 12 }">
                    <div class="title">{{ radius.name }}</div>
                    <div class="value">
                        <code>
                    border-radius:
                    {{
                        radius.type
                            ? useCssVar(`--el-border-radius-${radius.type}`)
                            : '"0px"'
                    }}
                </code>
                    </div>
                    <div class="radius" :style="{
                        borderRadius: radius.type
                            ? `var(--el-border-radius-${radius.type})`
                            : '',
                    }" />
                </el-col>
            </el-row>
        </div>

        <div class="group">
            <h1>阴影</h1>
            <p>我们提供了以下几种投影模式，以供选择</p>
            <div class="flex justify-between items-center flex-wrap">
                <div v-for="(shadow, i) in shadowGroup" :key="i" class="flex flex-col justify-center items-center"
                    m="auto" w="46">
                    <div class="inline-flex" h="30" w="30" m="2" :style="{
                        boxShadow: `var(${getCssVarName(shadow.type)})`,
                    }" />
                    <span p="y-4" class="demo-shadow-text" text="sm">
                        {{ shadow.name }}
                    </span>
                    <code text="xs">
                {{ getCssVarName(shadow.type) }}
            </code>
                </div>
            </div>
        </div>


    </div>
</template>

<script lang="ts" setup>

import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star, ZoomOut, Share, Upload, ArrowLeft, ArrowRight, Eleme,
} from '@element-plus/icons-vue'
import type { CascaderValue } from 'element-plus'

import { ref } from 'vue'
import { useCssVar } from '@vueuse/core'

const buttonType = ref('primary')

const isDisabled = ref(false)
const cascaderVal = ref(['donggua', 'beigua'])
const buttonSize = ref('small')
const cascaderOptions = [
    {
        value: 'xigua',
        itemVal: 'xiguagua',
        label: '西瓜',
        disabled: true
    },
    {
        value: 'donggua',
        itemVal: 'dongguagua',
        label: '东瓜',
        children: [
            {
                value: 'beigua',
                itemVal: 'beiguagua',
                label: '北瓜'
            }
        ]
    }
]
const cascaderProps = {
    // 次级菜单的展开方式
    expandTrigger: 'hover',
    // 是否多选
    multiple: true,
    checkStrictly: true,
    emitPath: false,
    value: 'itemVal'
}
const cascaderHandleChange = (value: CascaderValue) => {
    console.log(value, 'cascaderHandleChange')
    console.log(cascaderVal.value, '#cascaderVal')
}
const radiusGroup = ref([
    {
        name: 'No Radius',
        type: '',
    },
    {
        name: 'Small Radius',
        type: 'small',
    },
    {
        name: 'Large Radius',
        type: 'base',
    },
    {
        name: 'Round Radius',
        type: 'round',
    },
])

const shadowGroup = ref([
    {
        name: 'Basic Shadow',
        type: '',
    },
    {
        name: 'Light Shadow',
        type: 'light',
    },
    {
        name: 'Lighter Shadow',
        type: 'lighter',
    },
    {
        name: 'Dark Shadow',
        type: 'dark',
    },
])

const getCssVarName = (type: string) => {
    return `--el-box-shadow${type ? '-' : ''}${type}`
}

const buttons = [
    { type: '', text: 'plain' },
    { type: 'primary', text: 'primary' },
    { type: 'success', text: 'success' },
    { type: 'info', text: 'info' },
    { type: 'warning', text: 'warning' },
    { type: 'danger', text: 'danger' },
] as const


</script>

<style lang="scss" scoped>
.group {
    margin: 20px;
    padding: 10px;
    border: 3px solid skyblue;
}

.mb-4 {
    margin-bottom: 10px;
}

P,
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 30px;
    vertical-align: middle;
}

.el-button .custom-loading .circular {
    margin-right: 6px;
    width: 18px;
    height: 18px;
    animation: loading-rotate 2s linear infinite;
}

.el-button .custom-loading .circular .path {
    animation: loading-dash 1.5s ease-in-out infinite;
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    stroke-width: 2;
    stroke: var(--el-button-text-color);
    stroke-linecap: round;
}

.demo-border .text {
    width: 15%;
}

.demo-border .line {
    width: 70%;
}

.demo-border .line div {
    width: 100%;
    height: 0;
    border-top: 1px solid var(--el-border-color);
}

.demo-border .line .dashed {
    border-top: 2px dashed var(--el-border-color);
}

.demo-radius .title {
    color: var(--el-text-color-regular);
    font-size: 18px;
    margin: 10px 0;
}

.demo-radius .value {
    color: var(--el-text-color-primary);
    font-size: 16px;
    margin: 10px 0;
}

.demo-radius .radius {
    height: 40px;
    width: 70%;
    border: 1px solid var(--el-border-color);
    border-radius: 0;
    margin-top: 20px;
}

.el-shadow200 {
    width: 200px;
    height: 200px;
    box-shadow: var(--el-box-shadow-lighter);
}
</style>